<template>
	<div class="c-authen-edit">
		<!-- 认证编辑 -->
		<div class="company-info-box company-info-a flexItems">
			<div class="company-info-photo flexColumn flexCenter font16">
				<p>企业</p>
				<p>用户</p>
			</div>
			<div class="company-info-a-right">
				<div class="company-info-a-name flexItems">
					<span class="name">科大讯飞</span>
					<img src="../../assets/images/v-a.png" alt="" v-if="!rz">
					<img src="../../assets/images/v-b.png" alt="" v-else>
					<span class="renzheng" :class="{'renzhengOn':rz}">{{rz?'已认证':'未认证'}}</span>
				</div>
				<div class="company-info-a-write flexItems">
					<span class="font14">{{$t('common.company.enterpriseInfo')}}  85%</span>
					<router-link to="" class="wanshanInfo">
						<i class="el-icon-edit-outline"></i>{{$t('common.company.improveInfo')}}
					</router-link>
				</div>
			</div>
		</div>
		
		<div class="c-authen-edit-content">
			<div class="c-authen-content">
				<!-- LOGO -->
				<div class="company-userinfo-head flex">
					<div class="company-userinfo-head-img flexCenter">
						<img :src="imgs1" alt="" v-if="imgs1!=''"/>
						<span v-else>LOGO</span>
					</div>
					<div class="company-userinfo-head-text flexColumn">
						<p class="h99">{{$t('common.company.companytask4')}}</p>
						<p class="h99">{{$t('common.company.companytask5')}}</p>
						<el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-success="handleAvatarSuccess1">
							<span class="color1">{{$t('common.company.upload')}}</span>
						</el-upload>
					</div>
				</div>
				
				<!-- 企业基本信息 -->
				<div class="c-authen-box">
					<div class="zmlTitle">{{$t('common.company.companyInfo')}}</div>
					<div class="c-authen-informa">
						<table>
							<tr>
								<td>
									<div class="flexItems">
										<label>{{$t('common.company.companyName')}}：</label>
										<el-input v-model="qy_name"><span slot="suffix" class="el-input__icon">个</span></el-input>
									</div>
								</td>
								<td>
									<div class="flexItems">
										<label>{{$t('common.company.companyCode')}}：</label>
										<el-input v-model="qy_code"/>
									</div>
								</td>
								<td>
									<div class="flexItems">
										<label>{{$t('common.company.companyLegal')}}：</label>
										<el-input v-model="qy_user"/>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									<div class="flexItems">
										<label>{{$t('common.company.companyCapital')}}：</label>
										<el-input v-model="qy_price"><span slot="suffix" class="el-input__icon">万元</span></el-input>
									</div>
								</td>
								<td>
									<div class="flexItems">
										<label>{{$t('common.company.companyDate')}}：</label>
										<el-date-picker
										  v-model="qy_date"
										  type="month"
										  placeholder="成立日期">
										</el-date-picker>
									</div>
								</td>
								<td>
									<div class="flexItems">
										<label>{{$t('common.company.companyType')}}：</label>
										<el-select v-model="qy_type" placeholder="请选择">
										    <el-option
										      v-for="item in options"
										      :key="item.value"
										      :label="item.label"
										      :value="item.value">
										    </el-option>
										  </el-select>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									<div class="flexItems">
										<label>{{$t('common.company.companyEmployees')}}：</label>
										<el-input v-model="qy_num"><span slot="suffix" class="el-input__icon">人</span></el-input>
									</div>
								</td>
								<td>
									<div class="flexItems">
										<label>{{$t('common.company.companyIntellectual')}}：</label>
										<el-input v-model="qy_knowledge"><span slot="suffix" class="el-input__icon">个</span></el-input>
									</div>
								</td>
								<td>
									<span class="h99">（{{$t('common.company.companytask1')}}）</span>
								</td>
							</tr>
						</table>
						<div class="table-row flex">
							<label>{{$t('common.company.companyBusiness')}}：</label>
							<div class="table-row-right">
								<el-input type="textarea" resize="none"/>
							</div>	
						</div>
						<div class="table-row flex">
							<label>{{$t('common.company.companyTags')}}：</label>
							<div class="table-row-right">
								<div class="table-row-tags">
									<el-tag
									  :key="tag"
									  v-for="tag in dynamicTags"
									  closable
									  :disable-transitions="false"
									  @close="handleClose(tag)">
									  {{tag}}
									</el-tag>
									<el-input
									  class="input-new-tag"
									  v-if="inputVisible"
									  v-model="inputValue"
									  ref="saveTagInput"
									  size="small"
									  @keyup.enter.native="handleInputConfirm"
									  @blur="handleInputConfirm"
									>
									</el-input>
									<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
								</div>
								<div class="table-row-btns">
									<button class="zmlBtn2">{{$t('common.newJob.save')}}</button>
									<span class="delete">{{$t('common.operate.delete')}}</span>
								</div>
							</div>	
						</div>
					</div>
				</div>
				
				<!-- 核心技术与产品方向 -->
				<div class="c-authen-box">
					<div class="c-authen-fx flexItems flexBetween">
						<div class="zmlTitle">{{$t('common.company.companyDirection')}}</div>
						<div class="flexItems color1"><i class="el-icon-circle-plus-outline color1" style="margin-right: 5px;"></i>{{$t('common.detail.add')}}</div>
					</div>
					<div class="c-authen-jishu">
						<div class="table-row flex">
							<label class="flexItems">{{$t('common.detail.productName')}}：</label>
							<div class="table-row-right">
								<el-input type="text" resize="none"/>
							</div>	
						</div>
						<div class="table-row flex">
							<label>{{$t('common.detail.productDetail')}}：</label>
							<div class="table-row-right">
								<el-input type="textarea" resize="none"/>
							</div>	
						</div>
						<div class="table-row flex">
							<label>{{$t('common.detail.productTags')}}：</label>
							<div class="table-row-right">
								<div class="table-row-tags">
									<el-tag
									  :key="tag"
									  v-for="tag in dynamicTags"
									  closable
									  :disable-transitions="false"
									  @close="handleClose(tag)">
									  {{tag}}
									</el-tag>
									<el-input
									  class="input-new-tag"
									  v-if="inputVisible"
									  v-model="inputValue"
									  ref="saveTagInput"
									  size="small"
									  @keyup.enter.native="handleInputConfirm"
									  @blur="handleInputConfirm"
									>
									</el-input>
									<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
								</div>
								<div class="table-row-btns">
									<button class="zmlBtn2">{{$t('common.newJob.save')}}</button>
									<span class="delete">{{$t('common.operate.delete')}}</span>
								</div>
							</div>	
						</div>
					</div>
					<div class="c-authen-jishu">
						<div class="table-row flex">
							<label class="flexItems">{{$t('common.detail.productName')}}：</label>
							<div class="table-row-right">
								<el-input type="text" resize="none"/>
							</div>	
						</div>
						<div class="table-row flex">
							<label>{{$t('common.detail.productDetail')}}：</label>
							<div class="table-row-right">
								<el-input type="textarea" resize="none"/>
							</div>	
						</div>
						<div class="table-row flex">
							<label>{{$t('common.detail.productTags')}}：</label>
							<div class="table-row-right">
								<div class="table-row-tags">
									<el-tag
									  :key="tag"
									  v-for="tag in dynamicTags"
									  closable
									  :disable-transitions="false"
									  @close="handleClose(tag)">
									  {{tag}}
									</el-tag>
									<el-input
									  class="input-new-tag"
									  v-if="inputVisible"
									  v-model="inputValue"
									  ref="saveTagInput"
									  size="small"
									  @keyup.enter.native="handleInputConfirm"
									  @blur="handleInputConfirm"
									>
									</el-input>
									<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
								</div>
								<div class="table-row-btns">
									<button class="zmlBtn2">{{$t('common.newJob.save')}}</button>
									<span class="delete">{{$t('common.operate.delete')}}</span>
								</div>
							</div>	
						</div>
					</div>
				</div>
				
				<!-- 企业资质信息 -->
				<div class="c-authen-box">
					<div class="c-authen-title flexItems">
						<div class="zmlTitle">{{$t('common.company.companyQualification')}}</div>
						<!-- <span class="color3" style="margin-left: 8px;">(请确认上传企业正确的营业执照信息，确保认证申请通过)</span> -->
					</div>
					<div class="company-userinfo-head flex">
						<div class="company-userinfo-head-img flexCenter">
							<img :src="imgs2" alt="" v-if="imgs2!=''"/>
							<span v-else>{{$t('common.detail.enclosure')}}</span>
						</div>
						<div class="company-userinfo-head-text flexColumn">
							<p class="h99">{{$t('common.company.companytask4')}}</p>
							<p class="h99">{{$t('common.company.companytask8')}}</p>
							<el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-success="handleAvatarSuccess2">
								<span class="color1">{{$t('common.detail.upload')}}</span>
							</el-upload>
						</div>
					</div>
				</div>
				
				<!-- 企业简介 -->
				<div class="c-authen-box">
					<div class="zmlTitle">{{$t('common.company.companyBrief')}}</div>
					<div class="c-authen-jishu">
						<div class="table-row flex">
							<label>{{$t('common.detail.companyDetail')}}：</label>
							<div class="table-row-right">
								<el-input type="textarea" resize="none"/>
							</div>	
						</div>
					</div>
				</div>
				
				<div class="c-authen-btn flexCenter">
					<button class="zmlBtn1" @click="zmlSubmit">{{$t('common.detail.submit')}}</button>
					<button class="zmlBtn3" @click="$router.go(-1)">{{$t('common.company.cancel')}}</button>
				</div>
				
			</div>
			
			<!-- 提交弹框 -->
			<el-dialog :visible.sync="dialogVisible" width="400px" center>
			  <div class="renzheng-dialog">
				  <strong class="font26">企业认证</strong>
				  <p>请再次确认企业信息和企业资质</p>
				  <p>准确完整哦 !</p>
			  </div>
			  <span slot="footer" class="dialog-footer">
			    <el-button class="zmlBtn1" type="primary" @click="dialogVisible = false">确 定</el-button>
			  </span>
			</el-dialog>
		</div>
		
		
	</div>
</template>
<script>
  export default{
    data(){
      return{
		rz:false,
		
		imgs1:'',
		imgs2:'',
		
		options:[],
		
		qy_name:'',			//企业名称
		qy_code:'',			//信用代码
		qy_user:'',			//法人代表
		qy_price:'',		//注册资本
		qy_date:'',			//成立时间
		qy_type:'',			//企业类型
		qy_num:'',			//员工人数
		qy_knowledge:'',	//知识产权数
		
		dynamicTags: ['标签一', '标签二', '标签三'],  //标签
		inputVisible: false,
		inputValue: '',
		
		dialogVisible: false, //提交弹框
      }
    },
	methods:{
		// 上传图片成功   上传地址在el-upload里面的action
		handleAvatarSuccess1(res, file) {
			console.log(res,file)
			this.imgs1 = URL.createObjectURL(file.raw);
		},
		// 上传图片成功   上传地址在el-upload里面的action
		handleAvatarSuccess2(res, file) {
			console.log(res,file)
			this.imgs2 = URL.createObjectURL(file.raw);
		},
		
		// 增加标签 删除标签
		handleClose(tag) {
			this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
		},
		showInput() {
			this.inputVisible = true;
			this.$nextTick(_ => {
				this.$refs.saveTagInput.$refs.input.focus();
			});
		},
		handleInputConfirm() {
			let inputValue = this.inputValue;
			if (inputValue) {
				this.dynamicTags.push(inputValue);
			}
			this.inputVisible = false;
			this.inputValue = '';
		},
		
		
		// 提交
		zmlSubmit(){
			this.dialogVisible = true
		}
		
	}
  }
</script>
<style lang="scss">
.c-authen-edit-content{
	width: 100%;
	background-color: #fff;
	margin-top: 14px;
	padding: 0 30px 50px;
	.c-authen-content{
		width: 100%;
		height: auto;
		background-color: #fff;
		.company-userinfo-head{
			padding: 30px 0;
			border-bottom: 1px solid #D1D1D1;
			.company-userinfo-head-img{
				width: 100px;
				height: 100px;
				overflow: hidden;
				background-color: #F5F5F5;
				color: #999;
			}
			.company-userinfo-head-text{
				flex: 1;
				padding: 5px 0;
				padding-left: 20px;
				justify-content: space-between;
				
			}
		}
		.c-authen-box{
			padding-bottom: 30px;
			border-bottom: 1px solid #d1d1d1;
			.company-userinfo-head{
				border-bottom: 0;
				padding: 0;
				.company-userinfo-head-img{
					height: 127px;
				}
				.company-userinfo-head-text{
					padding: 20px 0;
					padding-left: 20px;
				}
			}
			.c-authen-informa,
			.c-authen-jishu{
				width: 100%;
				padding: 0 15px;
				table{
					width: 100%;
					margin-left: -26px;
					tr{
						td{
							padding: 6px 0;
							label{
								flex: 1;
								text-align: right;
								color: #666;
								white-space: nowrap;
							}
							.el-input{
								width: 180px;
							}
						}
					}
				}
				.table-row{
					padding: 6px 0;
					label{
						white-space: nowrap;
						color: #666;
						line-height: 32px;
					}
					.table-row-right{
						flex: 1;
						.button-new-tag,
						.input-new-tag{
							height: 28px;
							line-height: 28px;
						}
					}
					.el-textarea__inner{
						height: 120px;
					}
					.table-row-btns{
						padding-top: 22px;
						button{
							height: 34px;
						}
						.delete{
							color: #FF1F1F;
							text-decoration: underline;
							margin-left: 45px;
							cursor: pointer;
						}
					}
				}
			}
			.c-authen-jishu{
				padding: 9px 15px;
			}
		}
		.c-authen-box:nth-last-of-type(2){
			border-bottom: 0;
		}
		.c-authen-btn{
			button{
				margin: 0 6px;
			}
		}
		.el-tag {
		    margin-right: 10px;
			background-color: rgba(51,51,51,0.05);
			border: 0;
			color: #333;
			height: 32px;
			line-height: 32px;
		}
		.el-tag .el-tag__close{
			color: #333;
		}
		.el-tag .el-tag__close:hover{
			background-color: #409EFF;
			color: #fff;
		}
		.button-new-tag {
		    margin-right: 10px;
		    height: 32px;
		    line-height: 30px;
		    padding-top: 0;
		    padding-bottom: 0;
		}
		.input-new-tag {
		    width: 90px;
		    margin-right: 10px;
		    vertical-align: bottom;
		}
	}
	.renzheng-dialog{
		color: #333;
		text-align: center;
		strong{
			display: inline-block;
			margin-bottom: 15px;
		}
		p{
			font-size: 16px;
			line-height: 24px;
		}
	}
	.el-button--primary{
		width: 133px;
		height: 42px;
		background-color: #0F54BC;
		border-color: #0F54BC;
	}
	.el-button--primary:focus, .el-button--primary:hover{
		background-color: #0F54BC;
		border-color: #0F54BC;
	}
}
</style>
